import customed from '@/assets/chart/customed.json'

export default function generateOption(volumeDetailData, companyDisplayNames = ["开创", "新吉", "宁泰", "丰汇"], companyNames = []) {
    let maxDataValue1 = Math.max(...volumeDetailData[0].data);  // 对应 "养殖规模(亩)"
    let maxDataValue2 = Math.max(...volumeDetailData[1].data);  // 对应 "预期产量(吨)"
    let arr = [];
    let list = [];
    let series = [];
    let legend = [];
    let fontSize = 16;
    let barWidth = 9;
    let barGap = 60;
    let maxList = [];
    let max = 460; //背景最大值取y轴刻度线（最后注释部分）
    let colorStartList = ["transparent", "transparent"];
    let colorLeftList = ["#000", "#000", "#000"];
    let colorTopList = ["#ffa520", "#FFEBBC", "#73B0C7"];
    let colorEndList = customed.color;

    let chartObj = {
        series: volumeDetailData,
        chartList: companyDisplayNames,
    };

    function colorRgba(str, alpha) {
        let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        var sColor = str.toLowerCase();
        if (sColor == "transparent") {
            return "transparent";
        }
        if (sColor && reg.test(sColor)) {
            if (sColor.length === 4) {
                var sColorNew = "#";
                for (let i = 1; i < 4; i += 1) {
                    sColorNew += sColor
                        .slice(i, i + 1)
                        .concat(sColor.slice(i, i + 1));
                }
                sColor = sColorNew;
            }
            //处理六位的颜色值
            var sColorChange = [];
            for (let i = 1; i < 7; i += 2) {
                sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
            }
            return "rgba(" + sColorChange.join(",") + "," + alpha + ")";
        } else {
            return sColor;
        }
    }

    if (chartObj.series && chartObj.series.length) {
        chartObj.series.forEach((ele, i) => {
            arr = arr.concat(ele.data);
        });
        maxList = chartObj.series[0].data.map(() => {
            return max;
        });
        list = chartObj.series[0].data.map((item, index) => {
            return 1;
        });
        chartObj.series.forEach((item, index) => {
            legend.push({
                name: item.name,
                bottom: "-1%",
                itemStyle: {
                    color: colorEndList[index % colorEndList.length],
                },
            });
            const yAxisIndex = index;
            //实际数据顶部切片
            series.push({
                data: item.data,
                type: "pictorialBar",
                yAxisIndex: yAxisIndex,
                tooltip: {  
                    show: false,
                },
                barMaxWidth: 12,
                symbolPosition: "end",
                symbol: "diamond",
                symbolOffset: [
                    (-0.5 * (chartObj.series.length - 1) +
                        index +
                        -0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
                        barGap * 0.01 * index) *
                    barWidth,
                    "-47%",
                ],
                symbolRotate: 280, // 旋转45度
                symbolSize: [barWidth * 0.4, barWidth * 1],
                zlevel: 2,
            });

            //实际数据侧边切片
            series.push({
                data: item.data,
                type: "pictorialBar",
                yAxisIndex: yAxisIndex,
                tooltip: {
                    show: false,
                },
                barMaxWidth: 12,
                color: {
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    type: "linear",
                    global: false,
                    colorStops: [
                        {
                            offset: 0,
                            color: "transparent",
                        },
                        {
                            offset: 0.2,
                            color: colorRgba(
                                colorLeftList[index % colorLeftList.length],
                                0.1
                            ),
                        },
                        {
                            offset: 1,
                            color: colorRgba(
                                colorLeftList[index % colorLeftList.length],
                                0.3
                            ),
                        },
                    ],
                },
                symbolPosition: "end",
                symbol: "rect",
                symbolSize: [barWidth / 1.1, "100%"],
                symbolOffset: [
                    (-0.5 * (chartObj.series.length - 1) +
                        index +
                        -0.5 * barGap * 0.01 * (chartObj.series.length - 1) +
                        barGap * 0.01 * index -
                        0.25) *
                    barWidth,
                    0,
                ],
                zlevel: 1,
            });
            //柱子
            series.push({
                data: item.data,
                type: "bar",
                name: item.name,
                yAxisIndex: yAxisIndex,
                barGap: barGap + "%",
                barWidth: barWidth,
                barMaxWidth: 12,
                label: {
                    show: false,
                    position: "top",
                    distance: fontSize * 0.3,
                    textStyle: {
                        color: colorEndList[index % colorEndList.length],
                        fontSize: fontSize,
                    },
                },
                showBackground: false,

                itemStyle: {
                    color: {
                        x: 0,
                        y: 1,
                        x2: 0,
                        y2: 0,
                        type: "linear",
                        global: false,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(23, 74, 121, 1)'
                            },
                            {
                                offset: 0.5,
                                color: colorRgba(
                                    colorEndList[index % colorEndList.length],
                                    0.5
                                ),
                            },
                            {
                                offset: 1,
                                color: colorRgba(
                                    colorEndList[index % colorEndList.length],
                                    1
                                ),
                            },
                        ],
                    },
                },
            });

        });
    
        //背景图层
        series.push({
            name: '1',
            type: "pictorialBar",
            z: -1,
            yAxisIndex: 0,
            tooltip: {
                show: false
            },
            data: [0,0,0,0,0,0],
            barWidth: 12,
            color: {
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                type: "linear",
                global: false,
                colorStops: [
                    {
                        offset: 1,
                        color: 'rgba(23, 74, 121, 0)'
                    },
                    {
                        offset: 0,
                        color: 'rgba(23, 74, 121, 0.4)'
                    },
                ],
            },
            symbol: 'rect', // 设置图标形状为矩形
            symbolSize: [25, 118], // 设置矩形的宽度和高度
            symbolPosition: 'start', // 设置图标的位置
            symbolOffset: [0, 0] // 设置图标的偏移量
        });
    }
    return {
        title: {
            text: "",
            top: 20,
            left: "center",
            textStyle: {
                color: "#fff",
                fontSize: 20,
            },
        },
        tooltip: {
            show: true,
            trigger: "axis",
            borderWidth: 0,
            confine: false,
            appendToBody: true,
            backgroundColor: 'rgb(189, 219, 241,.1)', // 背景颜色
            formatter: (params) => {
                // 获取完整公司名称
                const index = companyDisplayNames.indexOf(params[0].name);
                const fullCompanyName = companyNames[index] || params[0].name;
                
                let result =
                    "<div style='font-size: 12px;'>" +
                    fullCompanyName +  // 使用完整公司名称
                    "</div>";
                params.forEach((item, index) => {
                    var dotHtml = `<span style="display:inline-block;font-size: 12px;margin-right:5px;border-radius:50%;width:${fontSize}px;height:${fontSize}px;background:${colorEndList[index]}"></span>`;
                    result +=
                        "<div style='display:flex;align-items:center;font-size: 12px; width: 150px'>" +
                        dotHtml +
                        `<span style="color:${colorEndList[index]}; font-weight: bold">${item.seriesName}</span>` +
                        (item.seriesName
                            ? "<span style='display:inline-block;margin-right:6px;color: #00b5eb;'></span>"
                            : "") +
                            `<span style="color:${colorEndList[index]}; font-weight: bold">${item.data}</span>` +
                            "</div>";
                    });
                    return result;
                },
                axisPointer: {
                    type: "shadow",
                    shadowStyle: {
                        color: "rgba(35,49,77,0.01)",
                    },
                },
                textStyle: {
                    color: "#fff",
                    fontSize: fontSize,
                },
            },
            grid: {
                left: "6%",
                right: "3%",
                bottom: "12%",
                top: "18%",
                containLabel: true, //包括文本，居中
            },
            legend: {
                data: chartObj.series.map(item => item.name),
                itemWidth: 15, // 设置图标宽度
                itemHeight: 8, // 设置图标高度
                itemGap: 10, // 设置图标之间的间距
                left: "center",
                bottom: "-5",
            },
            xAxis: {
                data: chartObj.chartList,
                type: "category",
                interval: 0,
                axisLabel: {
                    interval: 0,
                    // rotate: 30,  // 减小旋转角度，因为现在名称更短了
                    textStyle: {
                        fontSize: 14,  // 稍微增大字体
                        color: '#bddbf1'
                    }
                }
            },
            yAxis: [
                {
                    type: "value",
                    min: 0,
                    max: maxDataValue1,
                    name: "捕捞量(吨)",
                    nameTextStyle: {
                        color: "#bddbf1", // 单位文本的颜色
                        fontSize: 12 // 单位文本的字体大小
                    },
                },
                {
                    max:maxDataValue2,
                    type: "value",
                    name: "运输量(吨)",
                    nameTextStyle: {
                        color: "#bddbf1", // 单位文本的颜色
                        fontSize: 12 // 单位文本的字体大小
                    },
                    position: "right",
                    min: 0,
                },
            ],
            series: series,
        };
    }
    